<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件拖拽</title>
    <style>
        #target {
            width: 200px;
            height: 200px;
            border: 2px solid black;
        }
    </style>
    <script>
        function overIt(e) {
            e.preventDefault();
        }
        function dropIt(e) {
            e.preventDefault();
            //这里的思路就是说你将你本地的文件拖拽到指定的区域
            //首先利用我们的dataTransfer对象里面的files
            var files=e.dataTransfer.files;
            var tab=document.getElementById("result");
            tab.innerHTML="";
            //一行标题
            var title="<tr><td>文件名</td><td>文件类型</td><td>文件大小</td>";
            tab.innerHTML=title;
            for(var ii=0;ii<files.length;ii++) {
                var row="<tr><td>"+files[ii].name+"</td><td>"+files[ii].type+"</td><td>"+files[ii].size+"</td>";
                tab.innerHTML+=row;
            }
        }
    </script>
</head>
<body>

<div id="target" ondrop="dropIt(event);" ondragover="overIt(event);">
    <p>将您本地的文件拖曳到这里</p>
</div>
<br/>
<table width="100%" id="result" border="1"></table>
</body>
</html>